<template>
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-container>
            <el-aside class="el-aside" width="200px" style="background-color: #19374b">
                <user-menu/>
            </el-aside>
            <el-main class="elMain padding0">
                <el-row>
                    <el-col :span="24" class="bgWhite">
                        <el-breadcrumb separator=">" class="paddingLeft68">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>用户中心</el-breadcrumb-item>
                            <el-breadcrumb-item>企业验证</el-breadcrumb-item>
                        </el-breadcrumb>
                    </el-col>
                </el-row>
                <!-- 主要信息 -->
                <div class="width1124 marginTop70 marginLeft202 bgWhite borderLeft10">
                    <el-row>
                        <el-col :span="10" :offset="2">
                            <el-form ref="form" :model="form" label-width="100px" :rules="rules">
                                <el-form-item label="企业名称：" class="marginTop20" prop="companyName">
                                    <el-input v-model="form.companyName"></el-input>
                                </el-form-item>
                                <el-form-item label="企业位置：">
                                    <!-- <el-input v-model="form.company"> -->
                                    <el-cascader
                                        size="large"
                                        class="width100"
                                        :options="options"
                                        v-model="selectedOptions"
                                        @change="addressChange"
                                    ></el-cascader>
                                    <!-- </el-input> -->
                                </el-form-item>
                                <el-form-item label="详细地址：" prop="detailedAddress">
                                    <el-input v-model="form.detailedAddress"></el-input>
                                </el-form-item>
                                <el-form-item label="固定电话：" prop="tellPhone">
                                    <el-input v-model="form.tellPhone"></el-input>
                                </el-form-item>
                                <el-form-item>

                                    <el-button v-if="this.isEnterprise == false" type="success" @click="onSubmit('form')">保存</el-button>
                                    <el-button v-else type="success" @click="toSupplier()">点击跳转供应商认证</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="10" :offset="2">
                            <el-row class="marginTop40">
                                <el-col
                                    :span="10"
                                    :offset="3"
                                    class="paddingLeft15 borderLeft"
                                >上传营业执照</el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="5" :offset="3">
                                    <el-upload
                                        class="avatar-uploader"
                                        :action="uploadUrl()"
                                        :show-file-list="false"
                                        :file-list="this.fileList"
                                        list-type="picture"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload"
                                    >
                                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>
<style scoped>
/* 文件上传开始 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
  border: 1px dashed #cccccc;
  margin-top: 20px;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
/* 文件上传结束 */
/* 储能项目开始 */
.itemTitle {
  line-height: 84px;
  color: #333333;
  font-size: 24px;
}
/* 储能项目结束 */

.companyAddress,
.companySize {
  font-size: 16px;
  color: #c1c1c1;
}
.companyYear {
  font-size: 16px;
  color: #c1c1c1;
  margin: 26px 0;
}
.companyTitle {
  font-size: 20px;
  color: #666666;
  line-height: 26px;
}
.el-breadcrumb,
.el-breadcrumb__separator {
  line-height: 50px;
  font-size: 14px;
  color: #666666;
}
.el-breadcrumb__inner {
  font-size: 14px;
  color: #666666;
  font-weight: 500 !important;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.elMain {
  right: 0;
  position: relative;
  padding: 0;
}
.el-container {
  border: 0 !important;
}
</style>
<script>
import UserMenu from "../../layout/default/components/menu/userMenu";
import { serverBaseUrl } from "src/common/setting";
import { regionData, CodeToText } from "element-china-area-data";
export default {
  name: "Certification",
  components: {
    UserMenu
  },
  data() {
    return {
      imageUrl: "",
      options: regionData, //地址数据
      selectedOptions: [], //地址数据
      isEnterprise:false,
      province:'',
      city:'',
      country:'',
      uploadImgUrl:'',
      // fileList:[],//默认图片
      fileList: [{url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
      form: {
        companyName: "", //公司名称
        detailedAddress: "", 
        tellPhone: "",
      },
      rules: {
        companyName: [{required: true, message: '请输入企业名称！', trigger: 'blur'}],
        detailedAddress: [{required: true, message: '请输入详细地址！', trigger: 'blur'}],
        tellPhone: [{required: true, message: '请输入公司电话！', trigger: 'blur'}]
      },
    };
  },
  mounted(){
    //判断用户权限
    this.initData();
  },
  methods: {
    async initData(){
      const { $api } = this;
      var useData = await $api.user.test();
      console.log(useData);
      if(useData.code==0){
        // this.form = useData.data;
        if(useData.data.auth==true){
          this.form.companyName = useData.data.corpName;
          this.form.tellPhone = useData.data.corpTelPhone;
          this.form.detailedAddress = useData.data.corpAddress;
          this.isEnterprise = useData.data.auth;
        }
      }else{
        this.$message.error(useData.msg);
      }
    },
      //点击提交
    onSubmit(form) {
      this.$refs[form].validate((valid) => {
            if (valid) {
              if(this.uploadImgUrl.length==0){
                this.$message('请先完成营业执照附件上传');
                return false;
              }
              var dataObj = {
                name:this.form.companyName,
                addressProvence:this.province,
                addressCity:this.city,
                addressCounty:this.country,
                addressStreet:this.form.detailedAddress,
                bizLicence:this.uploadImgUrl
              }
              this.asyncCertification(dataObj)   
          } else {
            return false;
          }
        });
    },
    async asyncCertification(dataObj){
      const { $confirm, $api, $message, $router, setUserInfo } = this;
      try {
        const resData = await $api.user.apiUserinfoCorpAuth(dataObj);
        if(resData.code==0){
          const h = this.$createElement;
          this.$notify({
            title: '消息提示',
            message: h('i', { style: 'color: #67C23A'},resData.data )
          });
        }else{
          this.$message.warning(resData.msg);
        }
      } catch ({msg}) {
        console.log(msg)
        const h = this.$createElement;
        this.$notify({
          title: '消息提示',
          message: h('i', { style: 'color: #ff0000'},msg )
        });
      }
    },
    uploadUrl() {
      return { serverBaseUrl, CodeToText }.serverBaseUrl + "/admin/upload";
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
   
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      if(res.code==0){
        this.uploadImgUrl = res.data;
        this.fileList = [{url:res.message}]
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    addressChange(arr) {
      this.province = CodeToText[arr[0]];
      this.city = CodeToText[arr[1]];
      this.country = CodeToText[arr[2]];
    },
    // 点击跳转到供应商
    toSupplier(){
      alert("ddddd");
    }
  }
};
</script>
